
@font-face{
    font-family: RobotoCondensed;
    src: url(assets/roboto-condensed.light.ttf);
    font-weight: 800;
}

@font-face{
    font-family: EconomicaBold;
    src: url(assets/economica-bold.ttf);
}

@font-face{
    font-family: Lato;
    src: url(assets/Lato/Lato-Regular.ttf)
}

html{
    font-size: 16px;
}

body{
    text-align: center;
    font-size: 20px;
    padding: 2.5%;
    font-family: 'Lato', 'sans-serif';
    color: white;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', 'sans-serif';
    color: white;
}

label {
    color: #ffdbec;
}

a:link {
    color: #F251B1;
}

a:visited {
    color: #BD86FF;
}

a:link:hover {
    background-color: #F251B1;
    color: #ffdbec;
}

a:visited:hover {
    background-color: #F251B1;
    color: #ffdbec;
}

.profile{
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

#tofu-hero {
    height: 20vh;
}

#header {
    display: flex;
    width: 100%;
    padding: 10px 0px;
    position: relative;
    z-index: 2;
}

#logo {
    position: relative;
    float: left;
    width: 120px;
}

#bottomFloat {
    position: fixed;
    z-index: 2;
    bottom:0px;
    width: 100%;
}

#background{
    background-image: linear-gradient(180deg, #F251B1, #BD86FF);
    background-repeat: no-repeat;
    position:fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
}
 
#content{
    position:relative;
    z-index:1;
}

/*Input {*/
/*    clear: none;*/
/*    -webkit-box-flex: 0;*/
/*    -webkit-flex: 0 auto;*/
/*    -ms-flex: 0 auto;*/
/*    margin: 1px;*/
/*    flex: 0 auto;*/
/*    border-style: none;*/
/*    background-color: #ffdbec;*/
/*    box-shadow: inset 0 0 0 0 #fc0a7e;*/
/*    -webkit-transition: box-shadow 300ms cubic-bezier(.215, .61, .355, 1);*/
/*    transition: box-shadow 300ms cubic-bezier(.215, .61, .355, 1);*/
/*}*/

Button {
    display: inline-block;
    border: 0;
    border-radius: 3px;
    margin: 2px;
    background-color: white;
    -webkit-transition: background-color 500ms cubic-bezier(.789, .159, .25, 1), color 200ms cubic-bezier(.789, .159, .25, 1);
    transition: background-color 500ms cubic-bezier(.789, .159, .25, 1), color 200ms cubic-bezier(.789, .159, .25, 1);
    transition-property: background-color, color;
    transition-duration: 500ms, 200ms;
    transition-timing-function: cubic-bezier(0.789, 0.159, 0.25, 1), cubic-bezier(0.789, 0.159, 0.25, 1);
    transition-delay: 0s, 0s;
    /* Style for "Show more" */
    color: #322737;
    font-weight: bold;
    text-decoration: underline;
    font-family: 'Lato', 'sans-serif';
    font-size: 16px;
    text-align: center;
    /* To align "Show more" and "Apply" in Recommendation box */
    padding: 0;
    margin-right: auto;
}

Button:hover {
  background-color: #F251B1;
  color: white;
}

.close {
    color: white;
    background-color: transparent;
}